<template>
	<view>
		<text>横向</text>
		<scroll-view class="scroll-view-h" scroll-x="true">
			<view class="scroll-item-h a"></view>
			<view class="scroll-item-h b"></view>
			<view class="scroll-item-h c"></view>
		</scroll-view>

		<text>纵向</text>
		<scroll-view class="scroll-view-v" :scroll-top="top" @scroll="scroll" scroll-y="true">
			<view class="scroll-item-v a"></view>
			<view class="scroll-item-v b"></view>
			<view class="scroll-item-v c"></view>
		</scroll-view>
		
		<button @click="gotop">top</button>
	</view>
</template>

<script>
	export	default {
		data() {
			return {
				top: 500
			}
		},
		methods:{
			gotop(){
				this.top=0;
			},
			scroll(e){
				console.log(e);
			}
		}
	}
</script>

<style scoped>
	/* 横向 */
	.scroll-view-h {
		/* height: 250rpx; */
		white-space: nowrap;
		width: 100%;
	}

	.scroll-item-h {
		display: inline-block;
		height: 250rpx;
		width: 100%;
	}

	/* 纵向 */
	.scroll-view-v {
		height: 250rpx;
	}

	.scroll-item-v {
		height: 250rpx;
	}

	.a {
		background-color: yellowgreen;
	}

	.b {
		background-color: green;
	}

	.c {
		background-color: indianred;
	}

	text {
		margin-top: 30rpx;
	}
</style>
